<template>
  <div>

    <router-view />

    <tabbar id="tab">
      <tabbar-item link="/Home" @on-item-click="$store.state.tab=0" selected>
        <img slot="icon" src="static/img/首页.png">
        <span slot="label">首页</span>
      </tabbar-item>
      <tabbar-item link="/Hollow">
        <img slot="icon" src="static/img/树洞.png">
        <span slot="label">树洞</span>
      </tabbar-item>

      <tabbar-item @on-item-click="$store.state.wd.wdid==null? iflogin(user):posttypeshow=true">
        <img slot="icon" src="static/img/add2.png" style="width:50px;height:50px;margin-left: -10px;">
        <img slot="icon-active" src="static/img/add1.png" style="width:50px;height:50px;margin-left: -10px;">
      </tabbar-item>

      <tabbar-item  link="/Mymsg">
        <img slot="icon" src="static/img/消息.png">
        <span slot="label">消息</span>
      </tabbar-item>
      <tabbar-item link="/Wd">
        <img slot="icon" src="static/img/我的.png">
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>

<div v-transfer-dom><!-- 类型-->
<popup v-model="posttypeshow" height="20%">
<div class="postbox">
<div class="postbt">
<div class="pbt" @click="posttypeshow=false;tzshow=true">
  <img class="pbt1" src="static/img/pen.png" alt="" width="50">
  <p>发帖子</p>
</div>
<!-- <div class="pbt" @click="posttypeshow=false;wtshow=true">
  <img class="pbt2" src="static/img/question.png" alt="" width="50">
  <p>提问题</p>
</div> -->
<div class="pbt" @click="posttypeshow=false;sdshow=true">
  <img class="pbt3" src="static/img/fsd.png" alt="" width="50">
  <p>投树洞</p>
</div>
</div>
<img src="static/img/close.png" alt="" width="20" @click="posttypeshow=false"> 
</div>
</popup>
</div> 

<div v-transfer-dom><!-- 发帖子-->
<popup v-model="tzshow" height="100%">
<div>
<group style="height:545px;background-color: white;">
<div class="tztop">
<img src="static/img/close.png" alt="" width="20" @click="tzshow=false">
<span class="tzfabu" @click="tzfabu()">发表</span>
</div>
<x-textarea :placeholder="('发表帖子')" :height="200" :rows="8" :cols="30" v-model="Tz_text"></x-textarea>
<span class="Type" @click="tag=true">#{{T}}</span>

<div class="F_imgbox">
<el-upload
  action="http://localhost:3000/post/upload"
  list-type="picture-card"
  :on-remove="handleRemove"
  :on-success="handleAvatarSuccess"
  :file-list="fileList"
  :limit="6"
  >
  <i class="el-icon-plus"></i>
</el-upload>
</div>

</group>
</div>
</popup>
</div> 

<!-- <div v-transfer-dom> 提问题
<popup v-model="wtshow" height="100%">
<div>
<group style="height:545px;background-color: white;">
<div class="wttop">
<img src="static/img/close.png" alt="" width="20" @click="wtshow=false">
<span class="wtfabu">发表</span>
</div>
<x-input  :placeholder="('输入问题')" :max="40"></x-input>
<x-textarea  :placeholder="('添加问题描述')" :height="200" :rows="8" :cols="30" ></x-textarea>
<span class="Type">#问题</span>
</group>
</div>
</popup>
</div>   -->


<div v-transfer-dom><!-- 话题类型 -->
  <popup v-model="tag" position="left" width="100%">
    <div>
      <div class="tztop">
      <img src="static/img/close.png" alt="" width="20" @click="tag=false">
      </div>

      <div class="type_box">
        <div class="type_bt" v-for="(t,index) in typelist" :key="index" @click="T=t.type,tag=false">
          <img :src="t.img" alt="">
          <p>{{t.type}}</p>
        </div>
      </div>
    </div>
  </popup>
</div>


<div v-transfer-dom><!-- 树洞输入 -->
<popup v-model="sdshow" @on-hide="" @on-show="" height="100%">
<div>
<group style="height:545px;background-color: white;">
<div class="sdtop">
<img src="static/img/close.png" alt="" width="20" @click="sdshow=false">
<span class="sdfabiao" @click="sdfabu()">发表</span>
</div>
<x-input :title="('花名:')" :placeholder="('花名最多10个字哦')" :max="10" v-model="nickname"></x-input>
<x-textarea :max="332" :placeholder="('在匿名世界里说你想说的~')" :show-counter="true" :rows="1" autosize v-model="sdtext"></x-textarea>
<span class="Type">#树洞</span>
</group>
</div>
</popup>
</div>  

  </div>
</template>

<script>

export default {
  inject:['reload','iflogin'],
  // created(){
  //   let user = sessionStorage.getItem('user');
  //   if(!user){
  //     //跳去登陆
  //     this.$router.push('/Login');
  //   }else{
  //     //
  //     console.log("user",user);
  //     this.$store.state.user.name = user;
  //   }
  // },
 data () {
    return {
       user:sessionStorage.getItem('User_id'),
       posttypeshow: false,
       tzshow: false,
       wtshow: false,
       sdshow: false,
       nickname:'',
       sdtext:'',
       tag:false,
       T:'选择类型',
       dialogImageUrl: '',
       dialogVisible: false,
       TzimgList: [],
       Tz_text:'',
       fileList: [],
       typelist:[
         {
           type:'宿舍水塘',
           img:'static/img/ssst.png'
         },
         {
           type:'跳蚤市场',
           img:'static/img/tzsc.jpg'
         },
         {
           type:'影音地带',
           img:'static/img/yydd.jpg'
         },
         {
           type:'动漫星空',
           img:'static/img/dmxk.jpg'
         },
         {
           type:'举报辟谣',
           img:'static/img/py.png'
         },
         {
           type:'情感驿站',
           img:'static/img/qgyz.jpg'
         },
         {
           type:'搞笑图片',
           img:'static/img/gxtp.jpg'
         },
         {
           type:'幽默段子',
           img:'static/img/ymdz.jpg'
         },
       ]
    }
  },
  methods:{
    tzfabu(){//帖子发布
      let that = this;
      this.$vux.loading.show({
        text: '提交中'
      })
      if(this.T!='选择类型'){
      if(this.Tz_text!=''||this.TzimgList!=''){
        this.$http.post("http://localhost:3000/post/addpost",
            {
            User_id:this.$store.state.wd.wdid,
            User_name:this.$store.state.wd.wdname,
            User_tx:this.$store.state.wd.wdtx,
            Tz_type:this.T,
            Tz_text:this.Tz_text,
            TzimgList:JSON.stringify(this.TzimgList)
            },{emulateJSON: true})
            .then(
            (response)=>{
                this.$vux.loading.hide();
                if(response.data.msg.status=='ok'){
                    this.$vux.toast.show({
                    type: 'text',
                    text: '提交成功!',
                    position: 'middle',
                    time: '1000',
                    })
                    that.reload()//重载
                }
                if(response.data.msg.status=='error'){
                    this.$vux.toast.show({
                    type: 'text',
                    text: '提交失败!',
                    position: 'middle',
                    time: '1000',
                    })
                }
            },
            (error)=>{
            console.log(error);
            }
            );
      }
      else{
      setTimeout(() => {
      this.$vux.loading.hide()
      this.$vux.toast.show({
      type: 'text',
      text: '什么都没有哦',
      position: 'middle',
      time: '1000'
      })
      }, 1000)
      }
    }
    else{
      this.$vux.loading.hide()
      this.$vux.toast.show({
      type: 'text',
      text: '请选择帖子类型',
      position: 'middle',
      time: '1000'
      })
    }
    },
//
    sdfabu(){//帖子发布
      this.$vux.loading.show({
        text: '提交中'
      })
      if(this.sdtext!=''&&this.nickname!=''){
        this.$http.post("http://localhost:3000/sd/addsd",
            {
            User_id:this.$store.state.wd.wdid,
            Nick_name:this.nickname,
            Sd_text:this.sdtext,
            },{emulateJSON: true})
            .then(
            (response)=>{
                this.$vux.loading.hide();
                if(response.data.msg.status=='ok'){
                    this.$vux.toast.show({
                    type: 'text',
                    text: '提交成功!',
                    position: 'middle',
                    time: '1000',
                    })
                    this.reload()//重载
                }
                if(response.data.msg.status=='error'){
                    this.$vux.toast.show({
                    type: 'text',
                    text: '提交失败!',
                    position: 'middle',
                    time: '1000',
                    })
                }
            },
            (error)=>{
            console.log(error);
            }
            );
      }
      else{
      setTimeout(() => {
      this.$vux.loading.hide()
      this.$vux.toast.show({
      type: 'text',
      text: '请输入完整信息',
      position: 'middle',
      time: '1000'
      })
      }, 1000)
      }
    },

      handleAvatarSuccess(res, file) {//图片回调
        let _this = this;
        for(let i =0;i < res.result.length; i++){
        _this.TzimgList.push(res.result[i]);
        }
      },
      handleRemove(file, fileList) {//图片移出
        let _this = this;
        let u = file.response.result[0];
        let index = _this.TzimgList.indexOf(u);
        if (index > -1) {
          _this.TzimgList.splice(index, 1);
        }
      },
  },
  updated(){
  }
}
</script>
<style scoped>
#tab{
  position: fixed;
}
.postbox{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.Type{
    margin-left: 20px;
    margin-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 2px;
    padding-top: 2px;
    font-size: 12px;
    color: #008CBA;
    border: 2px solid #008CBA;
    border-radius: 5px;
}
.postbt{
  margin: 10px;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.pbt{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pbt1{
  background-color: #008CBA;
  border-radius: 50px;
  padding: 5px;
}
.pbt2{
  background-color: #008CBA;
  border-radius: 50px;
  padding: 5px;
}
.pbt3{
  background-color: #008CBA;
  border-radius: 50px;
  padding: 5px;
}

.tztop{
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
}
.tzfabu{
  color:steelblue;
  font-size: 20px;
}

.wttop{
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
}
.wtfabu{
  color:steelblue;
  font-size: 20px;
}
.sdtop{
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
}
.sdfabiao{
  color:steelblue;
  font-size: 20px;
}
.F_imgbox{
  text-align: center;
}
.type_box{
  display: flex;
  width: 100%;
   flex-wrap: wrap;
   justify-content: space-around;
}
.type_bt{
  width: 30%;
  margin: 10px;
  text-align: center;
}
</style>